import Taro, {Component} from '@tarojs/taro'
import {View, Text, CoverView, CoverImage} from '@tarojs/components'
import classNames from "classnames";
import './index.scss';
import {getNavSize} from '../../utils/style'

class NavBar extends Component {

  constructor(props) {
    super(props)
  }

  static defaultProps = {
    //searchbar // icon
    type: 'searchbar',
    fixed: false,
    title: '',
    isCoverView: false,
    isLight: false
  };

  state = {
    statusHeight: 0,
    navHeight: 0
  }


  static options = {
    addGlobalClass: true
  }

  config = {
    navigationBarTitleText: ''
  }

  componentWillMount() {
    // this.setState({
    //   showBack:
    // })
  }

  componentDidMount() {

  }

  // setNavSize () {
  //   const {statusHeight,navHeight} = getNavSize()
  //   this.setState({
  //     status: statusHeight,
  //     navHeight: navHeight
  //   },()=>{
  //     console.log('navHeight',navHeight)
  //   })
  // }

  jumpList() {
    const name = '全部商品'
    const ids = 1
    Taro.navigateTo({
      url: `/pages/list/index?ids=${ids}&name=${name}`
    })
  }

  back() {
    const pages = Taro.getCurrentPages()
    if (pages.length >= 2) {
      let link = pages[pages.length - 2].is
      console.log('需要返回两层', link)
      if (link == 'pages/auth/index') {
        Taro.navigateBack({
          delta: 2
        })
      } else {
        Taro.navigateBack()
      }
    } else {
      Taro.navigateBack()
    }
  }

  goHome() {
    Taro.reLaunch({
      url: `/pages/tabs/index`
    })
  }

  componentDidShow() {
    // this.setNavSize()
  }

  componentDidHide() {
  }

  componentCatchError() {
  }

  render() {
    const {statusHeight, navHeight} = getNavSize()
    const {type, fixed, title, isCoverView, isLight, children} = this.props
    // const { status,navHeight} = this.state
    const showBack = Taro.getCurrentPages().length > 1
    const sarchbar = (
      <View className="nav-search">
        <View className="nav-search-wrapper" onClick={this.jumpList.bind(this)}>
          <Text className='at-icon at-icon-search'></Text>
          <Text className="nav-search-placeholder">商品名称</Text>
        </View>
      </View>
    )
    const withoutCoverView = (
      <View className={classNames("nav-box", {"nav-box-fixed": fixed})}
            style={{'height': statusHeight + navHeight + 'px'}} catchtouchmove={fixed}>
        <View className='nav' style={{'margin-left': '10px'}}>
          <View className='status' style={{'height': statusHeight + 'px'}}></View>
          <View className='navbar' style={{'height': navHeight + 'px'}}>
            {
              type == 'define' && children
            }
            {
              type == 'searchbar' && sarchbar
            }
            {
              (type == 'icon' && showBack) &&
              <View className='nav-icon'>
                <View className="nav-icon-item nav-icon-left" onClick={this.back.bind(this)}>
                  <Text className="icon icon-back"></Text>
                </View>
                <View className="nav-icon-center">|</View>
                <View className="nav-icon-item nav-icon-right" onClick={this.goHome.bind(this)}>
                  <Text className="icon icon-home"></Text>
                </View>
              </View>
            }
            {
              (type == 'icon' && !showBack) &&
              <View className='nav-icon-home'>
                <View className="nav-icon-home-item">
                  <Text className="icon icon-home" onClick={this.goHome.bind(this)}></Text>
                </View>
              </View>
            }
            {
              title && <Text className={classNames('nav-title', {'nav-title-light': isLight})} decode>{title}</Text>
            }
            {/* 返回按钮 */}

            {/* <View className='nav-title'> */}
            {/* <Text>这是你的标题</Text> */}
            {/* </View> */}
          </View>
        </View>
      </View>
    )
    const withCoverView = (
      <CoverView className={classNames("nav-box", {"nav-box-fixed": fixed})}
                 style={{'height': statusHeight + navHeight + 'px'}}>
        <CoverView className='nav' style={{'margin-left': '10px'}}>
          <CoverView className='status' style={{'height': statusHeight + 'px'}}></CoverView>
          <CoverView className='navbar' style={{'height': navHeight + 'px'}}>
            {
              type == 'searchbar' && sarchbar
            }
            {
              (type == 'icon' && showBack) &&
              <CoverView className='nav-icon'>
                <CoverView className="nav-icon-item nav-icon-left" onClick={this.back.bind(this)}>
                  <CoverImage src="https://qiniuqianshop.fortunemy.top/back.png"
                              className="nav-icon-item-image"></CoverImage>
                  {/* <CoverView className="icon icon-back" onClick={this.back.bind(this)}></CoverView> */}
                </CoverView>
                <CoverView className="nav-icon-center">|</CoverView>
                <CoverView className="nav-icon-item nav-icon-right" onClick={this.goHome.bind(this)}>
                  <CoverImage src="https://qiniuqianshop.fortunemy.top/home%20%281%29.png"
                              className="nav-icon-item-image"></CoverImage>
                  {/* <CoverView className="icon icon-home" ></CoverView> */}
                </CoverView>
              </CoverView>
            }
            {
              (type == 'icon' && !showBack) &&
              <CoverView className='nav-icon-home'>
                <CoverView className="nav-icon-home-item">
                  <CoverView className="icon icon-home" onClick={this.goHome.bind(this)}></CoverView>
                </CoverView>
              </CoverView>
            }
            {
              title && <CoverView className='nav-title'>{title}</CoverView>
            }
            {/* 返回按钮 */}

            {/* <View className='nav-title'> */}
            {/* <Text>这是你的标题</Text> */}
            {/* </View> */}
          </CoverView>
        </CoverView>
      </CoverView>
    )
    return (
      isCoverView ? withCoverView : withoutCoverView
    )
  }
}

export default NavBar
